<template>
    <section class="contianer">
        <el-row  type="flex" justify="space-between">

            <!-- 顶部过滤列表 -->
            <div class="flights-content">
                <!-- 过滤条件 -->
                <FlightsFilters :data="cacheFlightsData" @setDataList="setDataList"/>
                
                <!-- 航班头部布局 -->
                <FlightsListHead/>
      
                <!-- 航班信息 -->
                <FlightsItem  
                v-for="(item,index) in dataList" 
                :key="index"
                :data="item"/>

                <!-- 分页 -->
                <el-row type="flex" justify="center" style="margin-top:10px;">
                    <!-- size-change：切换条数时候触发 -->
                    <!-- current-change：选择页数时候触发 -->
                    <!-- current-page: 当前页数 -->
                    <!-- page-size：当前条数 -->
                    <!-- total：总条数 -->
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageIndex"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="flightsData.total">
                    </el-pagination>
                </el-row>
            </div>
            <!-- 侧边栏 -->
            <div class="aside">
                <!-- 侧边栏组件 -->
                <FlightsAside/>
            </div>
        </el-row>
    </section>
</template>

<script>

import FlightsListHead from "@/components/air/flightsListHead"
import FlightsItem from '@/components/air/flightsItem'
import FlightsFilters from '@/components/air/flightsFilters'
import FlightsAside from "@/components/air/flightsAside"
export default {
  components:{
    FlightsListHead,
    FlightsItem,
    FlightsFilters,
    FlightsAside
  },
    data(){
        return {
           flightsData:{
             flights:[],//初始值，防止报错
             info:{},
             options:{}
           } ,
           cacheFlightsData :{
             flights:[],//初始值，防止报错
             info:{},
             options:{}
           },
           pageIndex:1,//初始页的值
           pageSize:5//默认的条数
        }
    },
    async beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用时
      await this.getFlightsList(to.query);
      next();
    },
    mounted(){ 
      // 页面加载完毕获取机票列表数据
      this.getFlightsList(this.$route.query);
    },
    computed:{
      // 用computed计算属性来监听分页数据的变化从而改变dataList的值
      dataList(){
        const start=(this.pageIndex-1)*this.pageSize;
        const end=(this.pageIndex)*this.pageSize;
        return this.flightsData.flights.slice(start,end);
      }
    },
    methods:{
      getFlightsList(query){
        // 获取机票数据列表
        return this.$axios({
          url:'/airs',
          params:query
        }).then(res=>{
          // console.log(res.data);
          this.flightsData=res.data;
          // 拷贝一份作为不改变的数据
          this.cacheFlightsData={...res.data};  
        })
      },
      handleSizeChange(pageSize){
        // 切换条数触发的事件函数
        // console.log('当前页面'+pageSize+'条');
        this.pageSize=pageSize;
       
      },
      handleCurrentChange(pageIndex){
        // 切换页面时触发的事件函数有返回值pageIndex当前页
      // console.log(`当前页${pageIndex}`);
      this.pageIndex=pageIndex;
      
      },
      // 子组件传给父组件的方法用来修改dataList的值
      setDataList(data){
        // console.log(data)
        //改变渲染页面的数据
        this.flightsData.flights=data;
        //改变总条数
        this.flightsData.total=this.flightsData.flights.length
        //改变页面数
        this.pageIndex=1;
      }
    }
}
</script>

<style scoped lang="less">
    .contianer{
        width:1000px;
        margin:20px auto;
    }

    .flights-content{
        width:745px;
        font-size:14px;
    }

    .aside{
        width:240px;
    } 
</style>